<template>
    <div class="siteLinkTable">
        <div class="">
            <el-divider class="topLine"><i class="lineIcon el-icon-document-copy"></i><span
                    class="lineTitle">模块-友情链接表列表</span></el-divider>
        </div>

        <div class="batchOPT">
            <el-button class="batchBTN" @click="toggleSelection([siteLinks[1],siteLinks[2]])">批量删除</el-button>
        </div>
        <div class="addSiteLink">
            <el-button class="addBTN" type="primary" icon="el-icon-circle-plus-outline" @click="addSiteLink">新增
            </el-button>
        </div>
        <!--:data绑定data中预设的参数
        单行显示:show-overflow-tooltip="true"
        如果为tr，则需要v-for="(siteLink,index) of siteLinks" :key="index"
        -->
        <el-table
                ref="multipleTable"
                tooltip-effect="dark"
                @selection-change="handleSelectionChange"
                :data="siteLinks"
                :show-overflow-tooltip="true"
                border
                style="width: 100%"
                class="previous-row"
                :header-cell-style="{backgroundImage:'linear-gradient(#ff6e02,#ff6d00)',color:'#ffffff',}"
        >

            <el-table-column type="selection" width="35">
            </el-table-column>
            <el-table-column
                    sortable
                    fixed
                    prop="uniId"
                    label="ID"
                    width="90"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    fixed
                    prop="name"
                    label="友情链接名称"
                    width="150"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true"
                             fixed
                             prop="linkType"
                             label="链接类型"
                             width="110">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.linkType === 'C' ? 'default':'success'"
                            id="typeIds" size="mini" disable-transitions>{{options |
                        optionObjectKV(scope.row.linkType)}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    sortable
                    fixed
                    prop="logo"
                    label="LOGO"
                    width="80"
                    :show-overflow-tooltip="true"
            >
                <template slot-scope="scope">
                    <el-avatar :src="scope.row.logo"></el-avatar>
                </template>
            </el-table-column>
            <el-table-column
                    sortable
                    prop="url"
                    label="友情链接地址"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
                    sortable
                    prop="sort"
                    label="排序"
                    width="80"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    prop="createTime"
                    label="创建时间"
                    width="150"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    prop="updateTime"
                    label="修改时间"
                    width="150"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    class="optionList"
                    fixed="right"
                    label="操作"
                    width="220">
                <!--使用slot-scope传递当前行参数-->
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary"
                            @click="edit(scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="del(scope.row)">删除
                    </el-button>
                </template>

            </el-table-column>
        </el-table>
        <div class="pageHelper">
            <el-button class="flushBTN" type="primary" @click="pageList(1)">刷新数据</el-button>
            <page-helper ref="pageHelper" :list="pageList"></page-helper>
        </div>

        <div class="editLink">
            <el-dialog :visible.sync="dialogFormVisible" :close-on-click-modal="false" class="dialogDef">
                <div slot="title" class="header-title">
                    <div style="padding:15px 20px;">{{this.dialogTitle}}</div>
                </div>
                <!--绑定校验规则，必须这里:model绑定模块，ref做别名，:rules指定规则-->
                <el-form v-model="siteLink" :model="siteLink" ref="siteSingle" :rules="rules" status-icon>
                    <el-form-item :label="labelName" :label-width="formLabelWidth" prop="name">
                        <el-input class="inputWidth" v-model="siteLink.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item :label="labelContent" :label-width="formLabelWidth" prop="url">
                        <el-input class="inputWidth" v-model="siteLink.url" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="链接类型" :label-width="formLabelWidth" prop="linkType">
                        <el-select id="linkType" class="inputWidth" v-model="siteLink.linkType" placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.key"
                                    :label="item.value"
                                    :value="item.key"
                                    :disabled="item.disabled"
                                    :change="typeChange(item.key)">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="排序" :label-width="formLabelWidth" prop="sort">
                        <el-input-number class="inputWidth" v-model="siteLink.sort" @change="handleChange" :min="1"
                                         label="排序"></el-input-number>
                    </el-form-item>
                    <el-form-item class="upload-icon-area" :label="uploadLabel" :label-width="formLabelWidth" prop="logo">
                        <big-file :upload-tile="uploadImg" :input-id="'upload-icon'"
                                  :suffix-type="['jpg','jpeg','png','gif']"
                                  :uniId="siteLink.uniId" :use-type="SOURCE_USE_TYPE.SOURCE_IUSE.key"
                                  :after-upload="afterUpload">
                        </big-file>
                        <span class="coreSuggest">建议图片颜色：#bbbbbb</span>
                        <el-row class="upload-icon">
                            <el-col :span="2">
                                <el-avatar shape="square" ref="linkLogo" :size="50" :src="siteLink.logo"></el-avatar>
                            </el-col>
                        </el-row>
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="save('siteSingle')">保 存</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import PageHelper from "../../../components/PageHelper";
    import BigFile from "../../../components/BigFile";

    export default {
        name: "SiteLinkSet",
        //引用组件
        components: {PageHelper, BigFile},
        data() {
            let nameValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length || '';
                }

                if (value === '' || value === undefined || value === null) {
                    callback(new Error("名称不能为空"));
                } else if (getLength(value) < 3) {
                    callback(new Error("名称长度至少3位"));
                } else {
                    callback();
                }
            };
            let linkValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '' || value === undefined || value === null) {
                    callback(new Error("链接URL不能为空"));
                } else if (getLength(value) < 3) {
                    callback(new Error("链接URL长度至少3位"));
                } else {
                    callback();
                }
            };
            return {
                message: '这里是大模块-友情链接表内容页',
                siteLinks: [],
                siteLink: {},
                level: LEVEL,
                status: STATUS,
                rules: {
                    name: [
                        {validator: nameValidate, trigger: 'blur'}
                    ],
                    url: [
                        {validator: linkValidate, trigger: 'blur'}
                    ],
                },
                //edit模态框
                dialogFormVisible: false,
                dialogType: "", //对话框类型：添加add/更新edit
                dialogTitle: '',
                labelName: '',
                disabled: 'disabled',
                labelContent: '',
                formLabelWidth: '120px',
                uploadLabel:'',
                uploadImg:'',
                //logo上传
                SOURCE_USE_TYPE: SOURCE_USE_TYPE,
                options: LINK_TYPE,
            }
        },
        mounted() {
            //1.普通列表查询
            this.list();
            //自定义赋值分页每页行数
            this.$refs.pageHelper.size = 10;
            //2.分页列表查询，默认初始化执行第一页
            this.pageList(1);
        },
        methods: {
            //多选的方法
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //1.list查询
            list() {
                this.$axios.get(process.env.VUE_APP_SERVER + '/system/admin/siteLink/dtoList')
                    .then((response) => {
                        console.log("模块-友情链接表列表：", response);
                    })
            },
            //2.查询当前页，需要设置变量传入pageHelper分页插件
            pageList(page) {
                Loadings.show();
                this.$axios.post(process.env.VUE_APP_SERVER + '/system/admin/siteLink/pageList', {
                    currentPage: page, //向后端发送参数。当前页
                    size: this.$refs.pageHelper.size, //引用传入组件后，在标签中refs定义的别名
                }).then((response) => {
                    Loadings.hide();
                    let resp = response.data;
                    this.siteLinks = resp.responseData.listPageData;
                    this.$refs.pageHelper.render(page, resp.responseData.totalSize);

                })
            },
            //3.新增siteLink
            addSiteLink() {
                this.siteLink = {};
                this.dialogFormVisible = true;
                this.dialogTitle = "新增友情链接";
                this.labelName = "公司名称";
                this.labelContent = "公司URL";
            },
            //4.修改
            edit(siteLink) {
                this.siteLink = $.extend({}, siteLink);
                this.dialogFormVisible = true;
                this.dialogTitle = "编辑友情链接";
                this.labelName = "链接名称";
                this.labelContent = "链接URL";
                if(this.siteLink.linkType===LINK_TYPE.COOPERATION.key){
                    this.uploadLabel="公司LOGO";
                    this.uploadImg="上传LOGO";
                }else{
                    this.uploadLabel="二维码上传";
                    this.uploadImg="上传二维码";
                }
            },
            del(siteLink) {
                /**
                 * 前端=》路径内携带参数使用url：'../'+{param}
                 * 后端=》requestMapping('../{param}')
                 *       void ...(@PathVariable String {param})
                 *
                 * ***引用toast的showConfirm全局方法，需要定义局部变量_this
                 * ***并且将存入的siteLink转化为局部对象，才能获取到uniId
                 */
                let _this = this;
                let siteLinkParam = siteLink;
                toast.showConfirm(siteLink.name, function () {
                        _this.$axios.delete(process.env.VUE_APP_SERVER + '/system/admin/siteLink/del/' + siteLinkParam.uniId)
                            .then((response) => {

                                let resp = response.data;
                                if (resp.success) {
                                    _this.pageList(1);
                                }
                            })

                    }
                )
            },
            //更新显示show
            save(formName) {
                let responseMsg = '';
                //前端校验
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios.post(process.env.VUE_APP_SERVER + '/system/admin/siteLink/save', this.siteLink)
                            .then((response) => {
                                let resp = response.data;
                                responseMsg = response;
                                if (resp.success) {
                                    //关闭对话框
                                    this.dialogFormVisible = false;
                                    this.pageList(1);
                                    toast.success("保存成功", "bottom-end");
                                } else {
                                    this.$notify({
                                        title: '填写内容错误',
                                        message: resp.responseMsg,
                                        position: "top-right",
                                        type: 'warning'
                                    });
                                }
                            })
                    } else {
                        this.$notify({
                            title: '填写内容错误',
                            message: '请按照提示内容填写正确信息',
                            position: "top-right",
                            type: 'warning'
                        });
                        return false;
                    }
                })
            },
            //排序监听
            handleChange(value) {
                console.log(value);
            },
            //logo回显
            afterUpload(resp) {
                if (resp.success) {
                    this.siteLink.logo = resp.responseData.path;
                    //解决上传完毕不回显的问题
                    //this.$refs.linkLogo.src=this.siteLink.logo;
                }
            },
            //监听类型变化
            typeChange(key){
                if(this.siteLink.linkType===LINK_TYPE.COOPERATION.key){
                    this.uploadLabel="公司LOGO";
                    this.uploadImg="上传LOGO";
                }else{
                    this.uploadLabel="二维码上传";
                    this.uploadImg="上传二维码";
                }
            }
        }
    }
</script>

<style scoped>
    /*顶部line样式*/
    .topLine {
        background-color: #2a92ee;
    }

    .lineIcon {
        font-size: 22px;
        color: #2a92ee;
        position: relative;
    }

    .lineTitle {
        position: relative;
        font-size: 16px;
        color: #2a92ee;
    }

    /*table样式*/
    .previous-row {
        background: #f0f9eb;
        margin-left: 2%;
        max-width: 96%;

    }

    .optionList {
        text-align: center;
    }

    /deep/ .el-table td, .el-table th {
        padding: 5px 0;
        text-align: center;
    }

    /deep/ .el-table .cell {
        padding-right: 2px;
        line-height: 20px;
        text-align: center;

    }

    /deep/ .el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {
        padding-left: 5px;
    }

    /*批量操作*/
    .batchOPT {
        float: left;
        margin-left: 2%;
        margin-bottom: 1%;
        z-index: 1;
    }

    /*新增*/
    .addSiteLink {
        float: left;
        margin-left: 5px;
    }

    .addBTN {
        font-size: 16px;
        padding: 11px 20px;
        border: 1px solid white;
        box-shadow: 1px 2px 2px #409eff;
        margin-top: 0;
    }

    .batchBTN {
        background-color: #ff5202;
        color: white;
        box-shadow: 1px 2px 2px #ff6e02;
    }

    .batchBTN:hover {
        background-color: #ff3d02;
        color: white;
    }

    .batchBTN:focus {
        background-color: #ff3d02;
        color: #ffffff;
    }

    /**分页位置/
     */
    .pageHelper {
        margin-left: 60px;
    }

    .flushBTN {
        position: relative;
        float: left;
        max-width: 95px;
        margin-right: 20px;
        margin-top: 5px;
    }

    /*模态框*/
    .header-title {
        background: #2589e7;
        color: white;
        font-size: 20px;
    }

    /*限制模态框高度*/
    /*.dialogDef{
        height: 100%;
    }*/

    /deep/ .el-dialog__header {
        padding: 0;
    }

    /deep/ .el-dialog--center .el-dialog__body {
        background: #d2d3d04d;
    }

    /deep/ .el-dialog__headerbtn .el-dialog__close {
        color: white;
        font-size: 24px;
    }

    /deep/ .el-form-item__label {
        text-align: center;
        padding: 0;
    }

    /deep/ .el-input .el-input__inner {
        margin-left: -40px;
    }

    /deep/ .el-input__suffix {
        right: 35px;
    }

    /deep/ .el-dialog__body {
        padding: 20px 10px;
    }

    /deep/ .el-form-item {
        margin-bottom: 5px;
    }

    .inputWidth {
        max-width: 500px;
        float: left;
    }

    /deep/ .inputWidth span {
        margin-left: -20px;
    }

    /deep/ .inputWidth .el-input-number__increase {
        margin-right: 22px;
        right: 0;
    }

    /*提示框的字符颜色*/
    /deep/ .el-form-item__error {
        float: left;
        position: relative;
        line-height: 30px;
        margin-left: 10px;
    }

    /deep/ .el-input__prefix, .el-input__suffix {
        color: #44cd3f;
        font-size: 18px;
    }

    /deep/ .el-input__icon {
        color: #44cd3f;
        font-size: 18px;
    }

    /*logo上传*/
    /deep/ input[type=file] {
        display: block;
        position: absolute;
        left: 400px;
        z-index: -1;
    }

    /deep/ .upload-icon-area .upload-btn {
        position: absolute;
        left: -10px;
        z-index: 2;
    }

    .upload-icon .el-avatar {
        margin-top: 50px;

        padding: 5px;
        width: 100%;
        background: white;
    }

    /*logo*/
    .el-avatar {
        background: transparent;
    }
    /*图片上传建议*/
    .coreSuggest{
        position: absolute;
        display: block;
        top: 0;
        left: 100px;
        color: #2a92ee;
    }

</style>